<script setup lang="ts">
import { ref, type Ref } from 'vue'
import { NavBar, FloatPaneContainer, type FloatPaneOptions, type ComponentOptions } from '@/widgets'
import { useAppComponents } from './components'
import { useNavItems } from './navbar'
import { useFloatPaneContainer } from './float-pane'
const fps = ref<InstanceType<typeof FloatPaneContainer>>()
useFloatPaneContainer(fps as Ref<InstanceType<typeof FloatPaneContainer>>)

const navItems = useNavItems()
const { left, main, right } = useAppComponents()
</script>
<template>
  <NavBar id="app-navbar" :items="navItems" class="is-dark" />
  <div id="app-main">
    <component
      v-for="{ component, position } in main"
      v-bind:style="position"
      :key="component.key"
      :is="component.component"
      v-bind="component.props"
      v-on="component.events"
    />
    <div id="app-left-side">
      <component
        v-for="opts in left"
        :is="opts.component"
        :key="opts.key"
        v-bind="opts.props"
        v-on="opts.events"
      />
    </div>
    <div id="app-right-side">
      <component
        v-for="opts in right"
        :is="opts.component"
        :key="opts.key"
        v-bind="opts.props"
        v-on="opts.events"
      />
    </div>
    <FloatPaneContainer
      id="main-float"
      ref="fps"
      :show-dock="false"
      :hidable="true"
      :padding="[0, 50, 20, 20]"
      :title="'main-float-pane'"
    />
  </div>
</template>

<style lang="scss">
html,
body {
  height: 100%;
  padding: 0;
  margin: 0;
}
#app {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
}
#app-navbar {
  width: 100%;
  height: 2em;
  font-size: 1.1rem;
}
#app-main {
  position: relative;
  width: 100%;
  flex: 1;
}
#app-right-side {
  position: absolute;
  top: 0.5em;
  right: 1em;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  width: 1px;
  > div {
    margin-bottom: 0.5em;
  }
}
#app-left-side {
  position: absolute;
  top: 0.5em;
  left: 1em;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 1px;
  > div {
    margin-bottom: 0.5em;
  }
}
#main-float {
  position: absolute;
  top: 0;
  left: 0;
}
</style>
./navbar
